<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--            <el-tab-pane label="bom" name="first">-->
      <!--                <div style="width: 100%;display: flex;justify-content: end;">-->
      <!--                    <singlefileUpload style="width:100px" ref="upload" :ruleFormdocFilePath='uploadForm' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">-->
      <!--                        <template v-slot:openDialog>-->
      <!--                            <div style="display: flex;flex-direction: column;">-->
      <!--                                <el-button style="width: 100px;" plain>上传附件</el-button>-->
      <!--                            </div>-->
      <!--                        </template>-->
      <!--                    </singlefileUpload>-->
      <!--                </div>-->
      <!--                <div style="position: relative;">-->
      <!--                    <div class="document-right-content">-->
      <!--                        <management :prodForm='documentForm'></management>-->
      <!--                    </div>-->
      <!--                </div>-->
      <!--                <div>-->
      <!--                    <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="loadList" />-->
      <!--                </div>-->
      <!--            </el-tab-pane>-->
      <el-tab-pane label="入库列表" name="tableintoStock">
      </el-tab-pane>
      <el-tab-pane label="出库列表" name="tableoutStock"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName!='first'">
      <div class="bom_list">
        <div style="display:flex;">
          <!-- <selectRoleTwo type='warehouse' selectType='singleChoice' style="width:120px;margin-right:20px"
                         @selectsuccess='personsuccess'></selectRoleTwo> -->
          <queryDate @queryDateClick='queryDateClick' style="width:500px;height:40px"></queryDate>
        </div>
        <div>
          <el-button type="primary" @click="stocklistclick">查询</el-button>
          <el-button type="primary" @click="addstock">添加{{ stockdialogName }}</el-button>
        </div>
      </div>
      <el-table :data="ExtableData">
        <el-table-column label="物料名" prop="bomName">
        </el-table-column>
        <el-table-column prop="bomSn" label="物料编号">
        </el-table-column>
        <el-table-column prop="content" label="物料用途" v-if="stockdialogName == '出库'">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="right">
              <span class="material_content">{{scope.row.content}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" header-align='center' align="center" :label="`${stockdialogName}数量`">
        </el-table-column>
        <el-table-column prop="createTime" header-align='center' align="center" :label="`${stockdialogName}时间`">
        </el-table-column>
        <el-table-column prop="createTime" header-align='center' align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看" placement="right">
              <a @click="detailsClick(scope.row)">
                <i style="color: #409EFF" class="el-icon-menu"></i>
              </a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="right">
              <a style="margin-left: 10px" @click="deleteStock(scope.row)">
                <i style="color: #F56C6C" class="el-icon-delete"></i>
              </a>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="proj_pagination">
        <pagination v-show="stocktotal>0" :total="stocktotal" :current.sync="stockcurrent" :size.sync="stocksize"
                    @pagination="stocklistclick"/>
      </div>
    </div>
    <el-dialog :key="times" :title="`请添加${stockdialogName}`" fullscreen :visible.sync="stockdialogVisible" width="90%"
               heigth='90vh'>
      <el-form :model="stockruleForm" :rules="stockrules" ref="stockruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="物料名称" prop="bomName">
          <el-input v-model="stockruleForm.bomName"></el-input>
        </el-form-item>
        <el-form-item label="物料型号" prop="bomSn">
          <el-input v-model="stockruleForm.bomSn"></el-input>
        </el-form-item>
        <el-form-item label="物料用途" v-if="stockdialogName == '出库'">
          <el-input v-model="stockruleForm.content"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input v-model="stockruleForm.quantity"></el-input>
        </el-form-item>
        <el-form-item label="成员" style="margin-bottom:0px">
          <selectmember type='warehouse' selectType='multipleChoice' style="width:100%;"
                        @selectsuccess='selectsuccessmamber'></selectmember>
        </el-form-item>
        <el-form-item label="附件">
          <div v-for="item in stockruleForm.docFilePath" v-if="stockruleForm.docFilePath.length > 0"
               style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}
          </div>
          <singlefileUpload style="width: 100px;" ref="upload" :ruleFormdocFilePath='uploadForm'
                            @uploadListDel="uploadListDel" @uploadSave="stockuploadSave" @returnUrl="returnUrl"
                            @uploadListShow="uploadListShow">
            <template v-slot:openDialog>
              <div style="display: flex;flex-direction: column;">
                <el-button plain>上传附件</el-button>
              </div>
            </template>
          </singlefileUpload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="stockdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addclickstock('stockruleForm')">确 定</el-button>
            </span>
    </el-dialog>
    <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
    <el-dialog title="参与成员" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="app_conter_app" v-for="item in stockUserlis">
        <div class="app_conter_app_left">
          <el-image style="width:25px;height:25px;border-radius:50%"
                    :src="item.avatar?item.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'"></el-image>
          <span class="app_conter_name">{{ item.userName }}</span>
        </div>
      </div>
      <div class="details-item">
        <span class="details-item-title">文档附件</span>
        <div v-for="item in stockdocFilePath">
          <el-tooltip class="item" effect="dark" content="点击查看" placement="right" v-for="data in item.docFilePath">
            <div class="documentClick_item" @click="documentClick(data)">{{ data.fileName }}</div>
          </el-tooltip>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import selectmember from "@/components/screen/selectmember";
import pagination from "@/components/Pagination";
// import { list, save } from "@/api/bom";
import {list as doclist, save} from "@/api/doc.js";
import {save as stocksave, list as stocklist, del} from "@/api/stock";
import uploadList from "@/components/upload/uploadList.vue";
import singlefileUpload from "@/components/upload/singlefileUpload";
import management from "./management";
import utils from "@/utils/utils";
import queryDate from "@/components/screen/queryDate.vue";
import selectRoleTwo from "@/components/screen/selectRoleTwo";

export default {
  components: {
    pagination,
    uploadList,
    singlefileUpload,
    management,
    selectmember,
    queryDate,
    selectRoleTwo,
  },
  data() {
    return {
      times: null,
      stockUserId: "",
      beginDate: "",
      endDate: "",
      stockUserlis: [],
      stockdocFilePath: [],
      dialogVisible: false,
      functionIndex: 0,
      documentForm: [],
      uploadListType: false,
      uploadForm: [],
      listQuery: {
        current: 1,
        size: 10,
        docType: "02",
        // dirId:'',
        deleted: 0,
        isUpdate: 0,
        isMyCreate: 0,
        name: "",
        docTypeId: "",
        docSubtype: "04",
      },
      docForm: {
        name: "",
        docFilePath: [],
        status: "00",
        docType: "02",
        docSubtype: "04",
        docTypeId: "",
        dirId: "",
      },
      stockdialogName: "出库",
      current: 1,
      size: 20,
      total: 0,
      stockcurrent: 1,
      stocksize: 20,
      stocktotal: 0,
      tableData: [], //物料表数据
      ExtableData: [], //出库表数据
      stockdialogVisible: false,
      activeName: "tableintoStock",
      stockruleForm: {
        quantity: "",
        bomName: "",
        docFilePath: [],
        docTypeId: "",
        docType: "07",
        stockType: "00",
        userList: [],
        bomSn: "",
        prodId: "",
        content: ''
      },
      rules: {
        bomName: [
          {
            required: true,
            message: "请输入物料名称",
            trigger: "blur",
          },
        ],
        bomSn: [
          {
            required: true,
            message: "请输入物料编号",
            trigger: "blur",
          },
        ],
      },
      stockrules: {
        bomName: [
          {required: true, message: "请选择物料", trigger: "blur"},
        ],
        quantity: [
          {required: true, message: "请输入数量", trigger: "blur"},
        ],
      },
    };
  },
  props: ['form'],
  created() {
    this.listQuery.docTypeId = this.$route.query.prodId;
    this.stockruleForm.prodId = this.$route.query.prodId;
    // this.loadList();
    this.stocklistclick()
  },
  methods: {
    personsuccess(data) {
      if (data.length > 0) {
        this.stockUserId = data[0].userId;
      } else {
        this.stockUserId = "";
      }
    },
    queryDateClick(data) {
      this.beginDate = data.beginDate;
      this.endDate = data.endDate;
    },
    stockdocumentlook(data) {
      var _this = this;
      var datalistQuery = {
        current: 1,
        size: 20,
        docType: "07",
        deleted: 0,
        isUpdate: 0,
        isMyCreate: 0,
        name: "",
        docTypeId: data.stockId,
      };
      doclist(datalistQuery).then((res) => {
        _this.stockdocFilePath = res.data.docData;
      });
    },
    documentClick(item) {
      window.open(item.filePath, "_system"); //url为访问的地址
    },
    handleClose() {
      this.dialogVisible = false;
      this.stockdocFilePath = [];
    },
    detailsClick(data) {
      console.log(data);
      this.stockUserlis = data.userList;
      this.dialogVisible = true;
      this.stockdocumentlook(data);
    },
    deleteStock(data) {
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", data.stockId);
        del(params).then((res) => {
          this.ExtableData.forEach(function (item, index) {
            if (item.stockId === data.stockId) {
              _this.ExtableData.splice(index, 1);
            }
          });
        });
      });
    },
    selectsuccessmamber(data) {
      if (!utils.isNull(data)) {
        let userArrat = data.split(",");
        userArrat.forEach((item) => {
          let uers = {userId: item};
          this.stockruleForm.userList.push(uers);
        });
      }
    },
    uploadSave(val) {
      let _this = this;
      _this.docForm.docFilePath = _this.uploadForm;
      this.docForm.dirId = _this.form.dirId;
      this.docForm.docTypeId = this.$route.query.prodId;
      this.docForm.name = this.uploadForm[0].fileName;
      save(this.docForm).then((res) => {
        this.documentForm.unshift(res.data);
        _this.$refs.upload.sucessClick();
        this.uploadForm = [];
      });
    },
    stockuploadSave(val) {
      let _this = this;
      _this.stockruleForm.docFilePath = _this.uploadForm;
      this.stockruleForm.docTypeId = this.$route.query.prodId;
      _this.$refs.upload.sucessClick();
    },
    uploadListShow(data) {
      this.uploadListType = data;
      if (this.activeName == "first") {
        this.uploadForm = this.docForm.docFilePath;
      } else {
        this.uploadForm = this.stockruleForm.docFilePath;
      }
    },
    returnUrl(data) {
      var docFilePath = {
        fileName: data.name,
        fileUrl: data.url,
      };
      this.uploadForm.push(docFilePath);
    },
    uploadListDel(data) {
      this.uploadForm.splice(data, 1);
    },
    loadList() {
      var _this = this;
      console.log(_this.listQuery);
      doclist(_this.listQuery).then((res) => {
        console.log(res);
        _this.documentForm = res.data.docData;
        _this.total = res.data.docData.length;
      });
    },
    addclickstock(stockruleForm) {
      this.$refs[stockruleForm].validate((valid) => {
        if (valid) {
          stocksave(this.stockruleForm).then((res) => {
            this.stockruleForm.bomName = "";
            this.stockruleForm.quantity = "";
            this.stockruleForm.bomSn = "";
            this.stockruleForm.docFilePath = [];
            this.stockruleForm.userList = [];
            this.stockruleForm.content = '';
            this.uploadForm = [];
            this.stockdialogVisible = false;
            this.ExtableData.unshift(res.data);
          });
        }
      });
    },
    addstock() {
      this.stockdialogVisible = true;
      this.times = new Date().getTime()
    },
    stocklistclick() {
      let params = new URLSearchParams();
      params.append("current", this.stockcurrent);
      params.append("size", this.stocksize);
      params.append("stockType", this.stockruleForm.stockType);
      params.append("startDate", this.beginDate);
      params.append("endDate", this.endDate);
      params.append("stockUserId", this.stockUserId);
      stocklist(params).then((res) => {
        this.ExtableData = res.data.records;
        this.stocktotal = res.data.total;
      });
    },
    addbom() {
      this.bomdialogVisible = true;
    },
    handleClick(data) {
      if (data.name != "first") {
        if (data.name == "tableintoStock") {
          this.stockruleForm.stockType = "00";
          this.stockdialogName = "入库";
        } else if (data.name == "tableoutStock") {
          this.stockruleForm.stockType = "01";
          this.stockdialogName = "出库";
        }
        this.stocklistclick();
      } else {
        this.loadList();
      }
    },
  },
};
</script>
<style scoped>
.bom_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.proj_pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app_conter_app {
  display: flex;
  /* align-items: center; */
  height: 40px;
  justify-content: space-between;
  overflow: auto;
}

.app_conter_app_left {
  height: 30px;
  display: flex;
  align-items: center;
}

.app_conter_name {
  font-size: 14px;
  margin-left: 10px;
}

.details-item {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}

.details-item-title {
  font-size: 14px;
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  margin-bottom: 10px;
  margin-top: 10px;
}

.documentClick_item {
  margin-bottom: 10px;
  cursor: pointer;
  /* text-align: center; */
}
.material_content{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
</style>
